<template>
	<view id="registry">
		<view class="header">
			<text
				class="iconfont icon-fanhui"
				@click="loginStore.changeDisplay('isRegistry', false)"></text>
		</view>
		<!-- 注册 -->
		<view
			class="title"
			v-if="!loginStore.loginStatus">
			<text>{{ loginStore.changeStatus ? '修改账户密码' : '创建新账户' }}</text>
			<text>设置用户名和密码,</text>
			<text>你之后仍可以随时更改。</text>
		</view>
		<!-- 登录 -->
		<view
			class="loginTitle"
			v-else>
			<PublicButton>使用微信登录</PublicButton>
			<PublicButton>使用手机登录</PublicButton>
			<text>或者继续使用社交帐户</text>
		</view>

		<form>
			<view
				v-for="(item, index) in !loginStore.loginStatus ? inputList : [inputList[0], inputList[1]]"
				:key="index">
				<input
					:type="item.type"
					:placeholder="item.placeholder"
					:maxlength="item.maxlength"
					:placeholder-style="item['placeholder-style']"
					:focus="item.focus"
					:password="item.password"
					:confirm-type="item['confirm-type']"
					@keyup="inputAstrict($event, item.placeholder)"
					v-model="(<typeof loginStore.form>loginStore.form)[item.value]" />
				<text :style="{ visibility: item.isHint ? 'visible' : 'hidden' }">{{ item.hint }}</text>
			</view>

			<PublicButton
				v-if="!loginStore.loginStatus"
				@click="registryHandler"
				class="registryBtn">
				完成
			</PublicButton>
			
			<PublicButton
				v-else
				@click="loginHandler"
				class="registryBtn">
				登录
			</PublicButton>
		</form>

		<view
			class="goLogin"
			v-if="!loginStore.loginStatus">
			已有账户了? 去
			<button
				plain
				@click="loginStore.toLogin">
				登录
			</button>
		</view>
		<view
			class="authorization"
			v-else>
			<u-checkbox-group>
				<u-checkbox
					:checked="authorizationChecked"
					activeColor="green"
					size="28"
					name="authorization"
					@change="authorizationHandler" />
			</u-checkbox-group>
			<text @click="changeAuthorization">
				已阅读并同意
				<text>《服务条款》</text>
				与
				<text>《隐私权政策》</text>
				。
			</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import useLoginRegistry from '@/hooks/useLoginRegistry';

const {
	loginStore,
	inputList,
	authorizationChecked,
	authorizationHandler,
	changeAuthorization,
	inputAstrict,
	loginHandler,
	registryHandler,
} = useLoginRegistry();
</script>

<style lang="scss" scoped>
@import './scss/registry.scss';
</style>
